<template>
    <div id="yigouneirong">
        <Head/>
        <div class="Imgs">
            <img src="../../assets/Qyigouneirong.png" alt="">
        </div>
        <div class="cahngeTab">
            <ul>
                <li v-for="(item,index) in goods" :class="{'isBorder': isShowd === index }" :key="index" @click="changetabs(index)">
                    <router-link to=""><i :class="item.icon"></i>{{item.title}}</router-link></li>
            </ul>
        </div>
        <div class="yigouCont">
            <img src="../../assets/icon_nocontent-png.png" alt="">
            <b>ni还未购买任何内容哦~</b>
        </div>
    <div class="Goback hiddem-xs-only">
        <li class="hidden-sm-and-up yd-fanhui">
            <router-link to="/yd-wode"><p><i class="el-icon-back"></i></p></router-link></li>
    </div>
    </div>
</template>

<script>
    import Head from '../Head'
    export default ({
        name:'yigouneirong',
        data(){
            return{
                isShowd:0,
                goods:[
                    {icon:'layui-icon layui-icon-read',title:'文章'},
                    {icon:'layui-icon layui-icon-fire',title:'连载'},
                ]
            }
        },
        methods:{
            changetabs(index){
                this.isShowd=index
            }
        },
        components:{
            Head
        }
    })
</script>

<style scoped>
    #yigouneirong{
        text-align: center;
        width: 65%;
        margin: 0px auto;
        padding-top: 80px;
    }
    .Imgs img{
        width: 70%;
        height: 105px;
    }
    .cahngeTab{
        margin:20px auto;
        width: 70%;
        padding-bottom: 52px;
        border-bottom: 1px solid #f0f0f0;
    }
    .cahngeTab li{
        font-size: 14px;
        font-weight: 700;
        float: left;
        padding: 20px 30px 12px 30px;
    }
    .cahngeTab li>a{
        color: #969696;
    }
    .cahngeTab i{
        font-size: 16px;
        margin-right: 10px;
    }
    .cahngeTab li:hover{
        border-bottom: 2px solid #333333;
    }
    .isBorder{
        color: #333333;
        border-bottom: 2px solid #333333;
    }
    .yigouCont{
        padding-top: 50px;
        text-align: center;
    }
    .yigouCont b{
        font-size: 14px;
        color: #333333;
    }
    .yigouCont img{
        display: block;
        margin: 0px auto;
        /*margin-bottom: 20px;*/
        width: 100px;
        height: 86px;
    }
.actives{
    background-color: #f0f0f0;
    color: #ff4f4c;
}
.Goback li{
    text-align: center;
    line-height: 50px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: #b3b3b3;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    font-size: 35px;
    opacity:0.5;
}
.Goback li i{
    color: #fff;
}
    @media screen and (max-width: 750px){
        #yigouneirong{
            width: 90%;
        }
        .Imgs img{
            width: 100%;
            height: 90px;
        }
        .cahngeTab{
            margin-top: 10px;
            width: 100%;
        }
        .yigouCont img{
            margin-bottom: 0;
        }
    }
</style>